React에 tailwindcss 끼얹기

css를 어떤식으로 할지 매번 고민이 되는 것 같습니다. 그래서 편하고 쉽고 좋아보이는 css 라이브러리를 고르던 와중 state of css에서 높은 만족도를 보이는 tailwindcss를 써봤습니다.

#한국어블로그

#React

#TypeScript

#ESLint

#prettier

lee.byonghun

2022.02.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

css를 어떤식으로 할지 매번 고민이 되는 것 같습니다. css module, sass, scss, styled-component, emotion, stiches ... 너무 많지만 매번 무언가 부족한 느낌이 들었습니다.

그래서 편하고 쉽고 좋아보이는 css 라이브러리를 고르던 와중 state of css에서 높은 만족도를 보이는 tailwindcss를 써봤습니다.

The State of CSS 2020: CSS Frameworks

기존 리액트 프로젝트에서 tailwindcss를 추가하는 법과 eslint, prettier 설정까지 추가로 해보겠습니다.

Tailwindcss란?

<figure class="bg-slate-100 rounded-xl p-8 dark:bg-slate-800">
  <img class="w-24 h-24 rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 text-center space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">
        Sarah Dayan
      </div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

Tailwindcss 사이트를 가면 처음 보이는 코드인데요, 보시는 것 처럼 html에 tailwindcss가 지정해둔 css들을 class로 불러와서 사용하는 형태입니다.

축약어로 되어있고 색, 패딩, 마진, 크기 등등 이미 설정이 되어있는 값을 쓰거나 수정하여 쓸 수 있습니다.

축약어로 되어있기 때문에 초반에는 실제 css에 어떻게 맵핑되어있는지 docs를 조금 확인 할 필요는 있지만, vscode 익스텐션 형태로 인텔리센스를 제공하기 때문에 생각보다 갖다 쓰기 편합니다.

Tailwind CSS IntelliSense - Visual Studio Marketplace

전체 코드는 아래의 링크에서 확인 해 주세요.

https://github.com/Tolluset/react-tailwindcss-template

프로젝트에 tailwindcss 추가

기존에 세팅되어있는 리액트 프로젝트는 아래의 링크의 프로젝트를 사용하겠습니다.

https://github.com/Tolluset/react-pj-template

React, typescript, webpack, babel, ESLint, prettier 형태로 구성되어있는 프로젝트입니다.

Tailwindcss, postcss 설정

yarn add -D tailwindcss postcss autoprefixer

Postcss를 통해 tailwindcss를 사용하겠습니다. Postcss가 빌드 시에 tailwindcss를 일반 css로 변환해주게 됩니다.

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwind.config.js' },
    autoprefixer: {},
  },
};

Postcss 설정 파일을 위와같이 생성해줍시다.

Tailwindcss로 설정파일을 만들어 줍니다.

// tailwind.cofnig.js

module.exports = {
  content: ['./src/**/*.tsx', './public/index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
};

리액트 파일들과 index.html 포함시켜줍니다.

Webpack 설정

postcss를 통해 tailwindcss를 사용하고 있기 때문에 postcss를 webpack에 연결하겠습니다.

yarn add -D postcss-loader css-loader style-loader

웹팩에서 사용할 로더들을 추가한 후 아래와 같이 로더들을 웹팩에 연결 해 줍니다.

// webpack.config.ts

import path from "path";
import webpack from "webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";
import { CleanWebpackPlugin } from "clean-webpack-plugin";
import ESLintPlugin from 'eslint-webpack-plugin';
import "webpack-dev-server";

const config: webpack.Configuration = {
  mode: "development",
  entry: "./src/index.tsx",
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        include: path.resolve(__dirname, 'src'),
        use: ["babel-loader"]
      },
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'src'),
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
    }),
    new CleanWebpackPlugin(),
    new ESLintPlugin({
      extensions: ['ts', 'tsx']
    })
  ],
};

export default config;

.css 파일을 postcss-loader가 처리한 후 css-loader 에게 넘긴다음 @import 구문 같은 것을 처리하고 style-loader 가 html에 붙여주기 때문에 오른쪽 부터 순서대로 해주는게 중요합니다.

작동 확인

테일윈드 글로벌 css를 사용하기 위해 아래와 같이 파일을 생성해줍니다.

// src/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind 부분에 워닝표시가 뜬다면 vscode의 postcss 익스텐션을 사용해주세요.

PostCSS Language Support - Visual Studio Marketplace

이후 index.tsx 에서 테일윈드 파일을 임포트해줍니다.

// src/index.tsx

import React from 'react';
import { render } from 'react-dom';
import App from './App';
import './tailwind.css';

render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

그러고 작동하는지 확인해보면

// src/App.tsx

import React from 'react';

const App = () => {
  return (
    <>
      <h1 className="bg-blue-500 text-green-300">React</h1>
      <p>How to setting the project</p>
    </>
  );
};

export default App;

잘 동작하는 걸 확인할 수 있습니다.

ESLint, prettier 설정

Tailwindcss를 위한 eslint, prettier를 설정해보겠습니다.

yarn add -D eslint-plugin-tailwindcss prettier-plugin-tailwindcss

ESLint 설정

플러그인들을 추가한 후 .eslintrc 파일을 수정해줍니다.

// .eslintrc

...
"plugins": [
    ...
  "tailwindcss"
],
"extends": [
    ...
    "plugin:tailwindcss/recommended",
    ...
],
...
"rules": {
    ...
    "tailwindcss/classname-order": "off",
    ...
}

플러그인을 plugins에 정의해주고 extends 에 플러그인이 제공하는 추천 셋팅을 사용합니다. 프리티어를 같이 사용할 때 클래스네임 순서가 둘이 겹치기 때문에 eslint쪽의 룰을 꺼두겠습니다. (prettier 쪽이 tailwindcss 공식 쪽입니다.)

Prettier 설정

{
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "all",
    "bracketSpacing": true,
    "parser": "typescript",
    "arrowParens": "always",
    "tailwindConfig": "./tailwind.config.js"
}

"tailwindConfig": "./tailwind.config.js"로 tailwindcss의 설정파일 경로를 지정해줍니다. 지정하지 않으면 알아서 prettier 설정 파일과 같은 디렉토리에서 찾아주지만, 까먹지 않기 위해 설정해둡니다.